<template>
    <p>Has phblished books:</p>
    <span>{{ author.books.length > 3 ? author.books.join('-') : author.books[0] }}</span>
    <br>
    <span>{{ publishedBooksMessage }}</span>
</template>

<script setup lang='ts'>
import { reactive, computed } from 'vue';

const author = reactive({
    name: 'John Doe',
    books: ['我的奋斗', '晚清七十年', '袁氏当国', '胡适口述自传', '我的大学']
})

const publishedBooksMessage = computed(() => {
    return author.books.length > 3 ? author.books.join('-') : author.books[0]
})
</script>

<style></style>